{% extends "base.html" %}
{% block styles %}
  {{ super() }}
 <style>
.div-inline{float:left;color:white;width:20%;margin-top:9px;text-align:left;line-height:250%}
html,body{width:100%;height:100%;}
</style>
{% endblock %}

{% block content %}
<div class="col-md-6" style="width:100%;height:100%;background:#ecf0f5;">
		<div class="row"style="background:#242736;">
			<div class="nav-tabs-custom" style="padding-top:0px;padding-left:30px;">
			</div>
		<section class="content"style="background:#242735">
		<div class="box-body" >
		<div class="box-header"style="margin:0 auto;background:#2F3543;width:90%"><i class="fa fa-bar-chart-o fa-fw"></i><h3 class="box-title"style="color:#686C78">IOT-x地图</h3></div>
	        <div class="box-body"style="background:#2F3543;width:90%;height:100px;margin: 0 auto;position:relative;">
		       <div id="dev-status-bar-wxre" style="height:6%;width:75%; background:#393F4D;position:absolute;left:9%;top:10% ">
    			<div class="div-inline" style="border-right:2px solid red">&nbsp;&nbsp;&nbsp;ID：{{ dashboard.id }}</div>
    			<div class="div-inline" style="border-right:2px solid red">&nbsp;&nbsp;&nbsp;GPS位置：{{ dashboard.GPS }}</div>
    			<div class="div-inline" style="border-right:2px solid red">&nbsp;&nbsp;&nbsp;开机时间：{{ dashboard.runtime }}小时</div>
    			<div class="div-inline" style="border-right:2px solid red">&nbsp;&nbsp;&nbsp;硬盘大小：{{ dashboard.hd_total }}</div>
    			<div class="div-inline" >&nbsp;&nbsp;&nbsp;硬盘使用率：{{ dashboard.hd_usage }}</div>
		       </div>
		       <button style="font-size:15px;float:right;border-radius:30px;margin-right:38px;margin-top:0.7%;width:6%;height:45px;background:#3B4251;color:white;border:1px solid #2E6E93" id="doConfig" >配置</button>
		 </div>

	   <div class="box box-primary" style="float:left;width:32%; height:300px; margin-left:5%; margin-top:15px;border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C">
	    	<div class="box-header"style="background:#404656;height:40px"><i class="fa fa-bar-chart-o fa-fw"></i><h3 class="box-title"style="colour:red">cpu使用率</h3></div>
		     <div class="box-body"style="background:#303644;height:300px">
		 	 <div id="dev-status-bar-wxre1" style="left:10px;float:right;width: 100%; height:100%; margin: 0 auto; border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C"></div>
			</div>
	   </div>

		<div class="box box-primary" style="float:right;width:57%; height:300px;margin-right:5%; margin-top:15px; border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C">
			  <div class="box-header"style="background:#404656;height:40px"><i class="fa fa-bar-chart-o fa-fw"></i><h3 class="box-title"style="colour:red">设备分类饼图</h3></div>
		 		<div class="box-body"style="background:#303644;height:300px">
			  <div id="dev-status-bar-wxre2" style="background:#393F4D;left:10px;float:right;width:100%; height:100%; margin: 0 auto; border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C"></div>
		</div>
		</div>

		<div class="box box-primary" style="float:left;width:32%;height:300px; margin-left:5%; margin-top:50px;border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C">
	    	<div class="box-header"style="background:#404656;height:40px"><i class="fa fa-bar-chart-o fa-fw"></i><h3 class="box-title"style="colour:red">cpu使用率</h3></div>
		     <div class="box-body"style="background:#303644;height:300px">
		 	 <div id="dev-status-bar-wxre3" style="left:10px;float:right;width: 100%; height:100%; margin: 0 auto; border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C"></div>
			</div>
	   </div>

		<div class="box box-primary" style="float:right;width:57%;height:300px;margin-right:5%; margin-top:50px; border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C">
			  <div class="box-header"style="background:#404656;height:40px"><i class="fa fa-bar-chart-o fa-fw"></i><h3 class="box-title"style="colour:red">设备分类饼图</h3></div>
		 		<div class="box-body"style="background:#303644;height:300px">
			  <div id="dev-status-bar-wxre4" style="background:#393F4D;left:10px;float:right;width:100%; height:100%; margin: -10px; border-top: 1px solid #363C4C;border-bottom: 1px solid #363C4C"></div>
		</div>
		</div>
		 </div>
				</section>
		</div>
	</div>

    <div class="form-group" id="configFormDiv" style="display: none;">
    <form class="form-horizontal" id="configForm">
        <div class="form-group">
            <label class="col-md-2 control-label">唯一标识</label>
            <div class="col-md-4">
            <input type="text"  class="form-control unique_id" id="" value="{{configInfo.unique_id}}"  placeholder="" style="" readonly="true">
        </div>
        <label class="col-md-2 control-label">名称</label>
            <div class="col-md-4">
            <input  class="form-control full_name" type="text"  placeholder="名称" value="{{configInfo.full_name}}" id="" style=""  >
            </div>
        </div>
        <div id="time" class="form-group">
            <label class="col-md-2 control-label">位置</label>
            <div class="col-md-4">
            <input  class="form-control location" type="text"   value="{{configInfo.location}}" placeholder="位置" id="" style=""  >
            </div>
            <label class="col-md-2 control-label">GPS</label>
            <div class="col-md-4">
            <input  class="form-control gps" type="text"   value="{{configInfo.gps}}" placeholder="GPS" id="" style="" readonly="true"  >
            </div>
        </div>
        <div id="time" class="form-group">
            <label class="col-md-2 control-label">服务器IP</label>
            <div class="col-md-4">
            <input  class="form-control remote_address" type="text"   value="{{configInfo.remote_address}}" placeholder="IP:端口" id="" style="" >
            </div>
            <label class="col-md-2 control-label">存储路径</label>
            <div class="col-md-4">
            <input  class="form-control memory_address" type="text"   value="/mnt/python-www" placeholder="存储路径" id="" style="" readonly="true" >
            </div>
        </div>
</form>
    </div>

{% endblock  %}

{% block scripts %}
  {{ super() }}
<script src="../static/js/echarts/echarts.js" type="text/javascript"></script>
<script src="../static/js/business/index.js" type="text/javascript"></script>
{% endblock  %}

